<template>
	<view class="content">
		<uni-nav-bar title="智能广告投放系统"></uni-nav-bar>
		<!-- <view class="content">
			<image class="logo" src="/static/logo.png"></image>
			<view class="text-area">
				<text class="title">首页{{ title }}</text>
			</view>

			<navigator url="../my/my" open-type="navigate">
			     <view class="struct">
			         I have skills such as 
			     </view>
			 </navigator>
		</view> -->
		<view>
			<view class="qiun-columns">
				<view class="qiun-bg-white qiun-title-bar qiun-common-mt">
					<view class="qiun-title-dot-light" style="font-size: 32upx;margin-left:30upx">折线图</view>
				</view>
				<view class="qiun-charts"><canvas canvas-id="canvasLineA" id="canvasLineA" class="charts"
						@touchstart="touchLineA"></canvas></view>
			</view>


			<view>
				<view class="kuan-btn" v-for="(item,index) in btnContent" :key="item.id" @tap="kuanBtn(item)">
					<view class="btn-title">{{item.title}}</view>
					<view class="btn-data">{{item.count}}</view>
					<view class="btn-yestedata">昨日：{{item.ycount}}</view>
				</view>
			</view>

		</view>
	</view>
</template>

<script>
	import uCharts from '../../js_sdk/u-charts/u-charts/u-charts.js';
	import uniNavBar from '@/components/uni-nav-bar/uni-nav-bar.vue';
	import socket from 'plus-websocket';
	var _self;
	var canvaLineA = null;
	export default {
		components: { uniNavBar },
		data() {
			return {
				cWidth: '',
				cHeight: '',
				pixelRatio: 1,
				btnContent: [
					{ id: 1, title: '播放量', count: 0, ycount: 0 },
					{ id: 2, title: '观看人数', count: 0, ycount: 0 },
					{ id: 3, title: '优惠卷', count: 0, ycount: 0 },
					{ id: 4, title: '消费金额(元)', count: 0, ycount: 0 },
					{ id: 5, title: '订单数', count: 0, ycount: 0 },
					{ id: 6, title: '订单金额(元)', count: 0, ycount: 0 }
				],
				conntPlay: 0,
				conntView: 0,
				conntCoupon: 0,
				conntOrder: 0,
			};
		},
		onLoad() {
			_self = this;
			_self.cWidth = uni.upx2px(750);
			_self.cHeight = uni.upx2px(500);
			_self.indexData('观看人数', 'pc_IndexData_getPlayViewCount');
			_self.indexData('优惠卷', 'pc_IndexData_getCouponCount');
			_self.indexData('订单数', 'pc_IndexData_getOrderCount');
			_self.indexData('播放量', 'pc_indexData_getPlayCount');
		},
		methods: {
			go() {
				uni.navigateTo({
					url: '../my/my'
				});
			},

			kuanBtn(item) {
				if (item.title === '播放量') {
					this.indexData('播放量', 'pc_indexData_getPlayCount');
				} else if (item.title === '观看人数') {
					this.indexData('观看人数', 'pc_IndexData_getPlayViewCount');
				} else if (item.title === '优惠卷') {
					this.indexData('优惠卷', 'pc_IndexData_getCouponCount');
				} else if (item.title === '订单数') {
					this.indexData('订单数', 'pc_IndexData_getOrderCount');
				}
			},
			indexData(type, api) {
				const getPlay = {
					company: 'STQ',
					api: api,
					version: '1.0',
					data: {}
				};
				socket.sendSocketMessage({
					data: JSON.stringify(getPlay)
				});
				// if (type === '播放量') {
				// 	_self.conntPlay = 0
				// 	return _self.getData(type)
				// } if (type === '观看人数') {
				// 	_self.conntView = 0
				// 	return _self.getData(type)
				// } if (type === '优惠卷') {
				// 	_self.conntCoupon = 0
				// 	return _self.getData(type)
				// } if (type === '订单数') {
				// 	_self.conntOrder = 0
				// 	return _self.getData(type)
				// }
				_self.getData(type);
			},
			getData(type) {
				// console.log(1124)//循环四次
				socket.onSocketMessage(function (res) {
					if (res !== '{"type":"ping"}') {
					// 	console.log(111)//循环16次
					const resj = JSON.parse(res.data);
					if (resj.code === -1) {
						// this.$message.error(resj.message);
						uni.showToast({
								title: resj.message,
								icon:'none',
								duration: 2000,
								position:'center'
						});
					} else {

						const times = [];//时间段
						const data = [];//对应值
						resj.data.forEach(element => {
							times.push(element.time);
							data.push(element.count);
						});
						times.splice(0, 17);
						data.splice(0, 17);
						

						if(resj.api==="pc_indexData_getPlayCount"){
							_self.conntPlay=0;
							data.forEach(item=>{
								_self.conntPlay+=item;
							})
						}else if(resj.api === "pc_indexData_getPlayViewCount"){
							_self.conntView=0;
							data.forEach(item=>{
								_self.conntView+=item;
							})
						}else if(resj.api === "pc_IndexData_getCouponCount"){
							_self.conntCoupon=0;
							data.forEach(item=>{
								_self.conntCoupon+=item;
							})
						}else if(resj.api === "pc_IndexData_getOrderCount"){
							_self.conntOrder=0;
							data.forEach(item=>{
								_self.conntOrder+=item;
							})
						}

						

										// if (type === '播放量') {//判断条件有误   
										// 	data.forEach(item => {
										// 		_self.conntPlay += item
										// 	})
										// } if (type === '观看人数') {
										// 	data.forEach(item => {
										// 		_self.conntView += item
										// 	})
										// } if (type === '优惠卷') {
										// 	data.forEach(item => {
										// 		_self.conntCoupon += item
										// 	})
										// } if (type === '订单数') {
										// 	data.forEach(item => {
										// 		_self.conntOrder += item
										// 	})
										// }
										_self.showLineA(type, times, data)
										// console.log(data)
					}
					}
				});
			},
			showLineA(name, _categories, _data) {
				// _data = [12,4,51,52,12,22,19]
				// console.log(name)//循环三遍
				// console.log(_data)//循环三遍
				// console.log(123)
				// console.log(_self.conntPlay)
				// console.log(_self.conntView)
				// console.log(_self.conntOrder)
				// console.log(_self.conntCoupon)
				// console.log(11111111111111)
				// console.log(_data)

				_self.btnContent.forEach(item => {
					if (item.title === '播放量') {
						// console.log(_self.conntPlay)
						// console.log(111)
						item.count = _self.conntPlay
					}
					if (item.title === '观看人数') {
						// console.log(_self.conntView)
						// console.log(222)
						item.count = _self.conntView
					}
					if (item.title === '优惠卷') {
						// console.log(_self.conntCoupon)
						// console.log(333)
						item.count = _self.conntCoupon
					}
					if (item.title === '订单数') {
						// console.log(_self.conntOrder)
						// console.log(444)
						item.count = _self.conntOrder
					}
				})
			
				const _series = [{
					name: name,
					data: _data,
					color: 'red'
				}]
				canvaLineA = new uCharts({
					$this: _self,
					canvasId: 'canvasLineA', //页面组件canvas-id，支付宝中为id
					type: 'line', //图表类型
					fontSize: 11,
					legend: { show: true }, //是否显示各类别的图例标识
					dataLabel: true, //是否在图表中显示数据标签内容值
					dataPointShape: true, //是否在图表中显示数据点图形标识
					background: '#FFFFFF',
					pixelRatio: 1,
					categories: _categories,
					series: _series,
					animation: true, //是否动画展示
					xAxis: {
						type: 'grid',
						gridColor: '#CCCCCC',
						gridType: 'dash',
						dashLength: 8
						// disabled:true,
						// disableGrid:true,
					},
					yAxis: {
						//绘制坐标轴网格
						gridType: 'dash',
						gridColor: '#CCCCCC',
						dashLength: 8,
						splitNumber: 5,
						min: 2,
						max: 10,
						//格式化Y轴刻度方法如下
						format: val => {
							return val.toFixed(1);
						}
					},
					width: _self.cWidth,
					height: _self.cHeight,
					extra: {
						line: {
							type: 'straight'
						}
					}
				});
			},
			touchLineA(e) {
				canvaLineA.showToolTip(e, {
					format: function (item, category) {
						return category + ' ' + item.name + ':' + item.data;
					}
				});
			}
		}
	};
</script>

<style>
	* {
		margin: 0;
		padding: 0;
	}

	.qiun-charts {
		width: 750upx;
		height: 500upx;
		background-color: #ffffff;
	}

	.charts {
		width: 750upx;
		height: 500upx;
		background-color: #ffffff;
	}

	.content {
		display: flex;
		flex-direction: column;
		/* align-items: center; */
		/* justify-content: center; */
	}

	.box-kuan {
		width: 100%;
	}

	.kuan-btn {
		float: left;
		height: 160upx;
		width: 40%;
		border: 1px solid #999999;
		border-radius: 16upx;
		margin-left: 48upx;
		margin-bottom: 20upx;
	}

	.btn-title {
		height: 60upx;
		line-height: 60upx;
		margin-left: 20upx;
		font-size: 32upx;
		color: #999999;
	}

	.btn-data {
		height: 50upx;
		line-height: 50upx;
		margin-left: 20upx;
		font-size: 36upx;
	}

	.btn-yestedata {
		height: 50upx;
		line-height: 50upx;
		margin-left: 20upx;
		font-size: 32upx;
		color: #999999;
	}
</style>